<template>
  <view class="likes-page">
    <view class="like-item" v-for="(item, index) in likeList" :key="index">
      <view class="like-main-row">
        <image
          class="avatar"
          :src="item.avatar"
          mode="aspectFill"
          @click="toUser(item.avatarId)"
        />
        <view class="user-info-box">
          <view class="user-row">
            <view class="username">
              <view> {{ item.username }}</view>
              <view class="user-tag">{{ item.tag }}</view>
            </view>
            <text class="action-text"
              >赞了你的评论 <text class="time">{{ item.time }}</text></text
            >
          </view>
          <view class="comment-content" v-if="item.comment">
            <view>{{ item.comment }}</view>
          </view>
          <!-- <view class="comment-menu" v-if="item.comment">{{
            item.comment
          }}</view> -->
        </view>
        <image
          class="right-img"
          :src="item.pic"
          mode="aspectFill"
          @click="toDetail(item.detailId)"
        />
      </view>
    </view>
    <nomore text="没有更多内容了" v-if="nomore"></nomore>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      likeList: [
        // {
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   username: "我和我的宝贝",
        //   tag: "你的粉丝",
        //   action: "赞了你的评论",
        //   time: "03-09",
        //   comment: "评论内容示例：这是一条被点赞的评论内容，完整展示。",
        //   pic: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        // },
        // {
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   username: "KET报名",
        //   tag: "你的好友",
        //   action: "赞了你的笔记",
        //   time: "03-20",
        //   comment: "",
        //   pic: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        // },
        // {
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   username: "小红薯637366",
        //   tag: "你的粉丝",
        //   action: "赞了你的评论",
        //   time: "2024-12-08",
        //   comment: "评论内容示例：另一条评论内容。",
        //   pic: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        // },
      ],
      page: 1,
      limit: 10,
      nomore: false,
      canload: true,
    };
  },
  onReachBottom: function () {
    console.log("触底");
    if (this.canload) {
      this.page++;
      this.getlist();
    }
  },
  onLoad() {
    this.getlist();
  },
  onPullDownRefresh: function () {
    this.page = 1;
    this.likeList = [];
    this.nomore = false;
    this.canload = true;
    this.getlist();
  },

  methods: {
    getlist() {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "MemberNote/noteMessagelist",
        {
          type: 1,
          page: that.page,
          limit: that.limit,
        },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            if (res.data.length == 0) {
              that.nomore = true;
              that.canload = false;
            } else {
              var newData = res.data.map((item) => {
                return {
                  avatarId: item.member.id,
                  avatar: item.member.headimg,
                  username: item.member.nickname,
                  tag: that.checkTag(item.is_friend),
                  action: item.title,
                  time: item.create_time,
                  comment: item.content,
                  pic: (item.member_note&&item.member_note.pic) ? item.member_note.pic : null,
                  detailId: item.data_id,
                };
              });
              that.likeList = that.likeList.concat(newData);
            }
          }
        }
      );
    },
    checkTag(data) {
      switch (data) {
        case 0:
          return "陌生人";
        case 1:
          return "你的朋友";
        case 2:
          return "你的关注";
        case 3:
          return "你的粉丝";
      }
    },
    toUser(id) {
      app.goto("/pagesEchart/find/works?mid=" + id);
    },
    toDetail(id) {
      app.goto("/pagesEchart/find/works-detail?id=" + id + "&type=0");
    },
  },
};
</script>

<style scoped>
.likes-page {
  background: #fff;
  padding: 0 20rpx;
}
.like-item {
  border-bottom: 1rpx solid #f0f0f0;
  padding: 32rpx 0 24rpx 0;
}
.like-main-row {
  display: flex;
  align-items: flex-start;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.user-info-box {
  flex: 1;
  min-width: 0;
}
.user-row {
  display: flex;
  align-items: left;
  margin-bottom: 8rpx;
  flex-direction: column;
}
.username {
  font-weight: bold;
  font-size: 30rpx;
  color: #060505;
  margin-right: 12rpx;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-tag {
  font-size: 22rpx;
  color: #9e9e9e;
  background: #ffffff;
  border: #666 1px solid;
  border-radius: 18rpx;
  padding: 2rpx 10rpx;
  margin-left: 12rpx;
}
.action-text {
  font-size: 26rpx;
  color: #666;
  margin-right: 12rpx;
  margin-top: 10rpx;
}
.time {
  font-size: 26rpx;
  color: #666;
  margin-left: 12rpx;
}
.comment-content {
  font-size: 26rpx;
  color: #333;
  background: #ffffff;
  border-radius: 8rpx;
  padding: 10rpx 16rpx;
  margin-top: 2rpx;
  word-break: break-all;
  padding-left: 0;
}
.comment-content ::before {
  content: "\00a0 ";
  border-left: 5px solid #e7e7e7;
}
.comment-menu {
  font-size: 26rpx;
  color: #333;
  background: #f7f7f7;
  border-radius: 8rpx;
  padding: 10rpx 16rpx;
  margin-top: 2rpx;
  word-break: break-all;
}
.right-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  margin-left: 18rpx;
  flex-shrink: 0;
}
</style>
